<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		
		<!-- 陀螺仪功能区域 -->
		<view class="gyroscope-section">
			<text class="section-title">陀螺仪功能测试</text>
			
			<!-- 控制按钮 -->
			<view class="button-group">
				<button @click="startGyroscope" :disabled="isListening" type="primary">
					{{isListening ? '正在监听...' : '开始监听'}}
				</button>
				<button @click="stopGyroscope" :disabled="!isListening" type="warn">
					停止监听
				</button>
			</view>
			
			<!-- 陀螺仪数据显示 -->
			<view class="data-display">
				<text class="data-title">陀螺仪数据：</text>
				<view class="data-item">
					<text>X轴（俯仰）: {{gyroscopeData.x.toFixed(2)}}°</text>
				</view>
				<view class="data-item">
					<text>Y轴（横滚）: {{gyroscopeData.y.toFixed(2)}}°</text>
				</view>
				<view class="data-item">
					<text>Z轴（偏航）: {{gyroscopeData.z.toFixed(2)}}°</text>
				</view>
			</view>
			
			<!-- 状态显示 -->
			<view class="status-display">
				<text class="status-title">状态信息：</text>
				<view class="status-item">
					<text>监听状态: {{isListening ? '监听中' : '已停止'}}</text>
				</view>
				<view class="status-item">
					<text>更新间隔: {{interval}}ms</text>
				</view>
				<view class="status-item">
					<text>最后更新: {{lastUpdateTime}}</text>
				</view>
			</view>
			
			<!-- 使用说明 -->
			<view class="tips">
				<text class="tips-title">使用说明：</text>
				<text class="tips-text">1. 点击"开始监听"按钮开始获取陀螺仪数据</text>
				<text class="tips-text">2. 转动设备查看数据变化</text>
				<text class="tips-text">3. 点击"停止监听"按钮停止获取数据</text>
				<text class="tips-text">4. 在 iOS 设备上可能需要授权访问陀螺仪</text>
			</view>
		</view>
	</view>
</template>

<script>
// 导入陀螺仪插件
import jzH5Gyroscope from '@/uni_modules/jz-h5-gyroscope/index.js'

export default {
	data() {
		return {
			title: 'H5 陀螺仪插件示例',
			isListening: false,
			interval: 200,
			gyroscopeData: {
				x: 0,
				y: 0,
				z: 0
			},
			lastUpdateTime: '未开始'
		}
	},
	onLoad() {
		// 页面加载时设置陀螺仪数据变化监听
		this.setupGyroscopeListener();
	},
	
	onUnload() {
		// 页面卸载时清理监听
		this.cleanup();
	},
	
	methods: {
		/**
		 * 设置陀螺仪数据变化监听
		 */
		setupGyroscopeListener() {
			// 监听陀螺仪数据变化
			jzH5Gyroscope.onGyroscopeChange((data) => {
				this.gyroscopeData = data;
				this.lastUpdateTime = new Date().toLocaleTimeString();
			});
		},
		
		/**
		 * 开始监听陀螺仪
		 */
		startGyroscope() {
			jzH5Gyroscope.startGyroscope({
				interval: this.interval,
				success: (res) => {
					console.log('开始监听陀螺仪成功', res);
					this.isListening = true;
					uni.showToast({
						title: '开始监听陀螺仪',
						icon: 'success'
					});
				},
				fail: (error) => {
					console.error('开始监听陀螺仪失败', error);
					uni.showToast({
						title: '启动失败: ' + error.errMsg,
						icon: 'none',
						duration: 3000
					});
				},
				complete: (res) => {
					console.log('开始监听陀螺仪完成', res);
				}
			});
		},
		
		/**
		 * 停止监听陀螺仪
		 */
		stopGyroscope() {
			jzH5Gyroscope.stopGyroscope({
				success: (res) => {
					console.log('停止监听陀螺仪成功', res);
					this.isListening = false;
					this.lastUpdateTime = '已停止';
					uni.showToast({
						title: '停止监听陀螺仪',
						icon: 'success'
					});
				},
				fail: (error) => {
					console.error('停止监听陀螺仪失败', error);
					uni.showToast({
						title: '停止失败: ' + error.errMsg,
						icon: 'none'
					});
				},
				complete: (res) => {
					console.log('停止监听陀螺仪完成', res);
				}
			});
		},
		
		/**
		 * 清理资源
		 */
		cleanup() {
			// 停止监听
			if (this.isListening) {
				jzH5Gyroscope.stopGyroscope();
			}
			// 取消所有回调
			jzH5Gyroscope.offGyroscopeChange();
		}
	}
}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 50rpx;
		margin-bottom: 30rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
	}

	.gyroscope-section {
		width: 100%;
		max-width: 700rpx;
		background: #f8f8f8;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 30rpx;
		text-align: center;
		display: block;
	}

	.button-group {
		display: flex;
		justify-content: space-around;
		margin-bottom: 40rpx;
	}

	.button-group button {
		width: 280rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}

	.data-display, .status-display {
		background: white;
		border-radius: 15rpx;
		padding: 25rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.data-title, .status-title {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.data-item, .status-item {
		margin-bottom: 15rpx;
	}

	.data-item text, .status-item text {
		font-size: 26rpx;
		color: #666;
		font-family: 'Courier New', monospace;
	}

	.tips {
		background: #e8f4fd;
		border-radius: 15rpx;
		padding: 25rpx;
		border-left: 8rpx solid #007aff;
	}

	.tips-title {
		font-size: 28rpx;
		color: #007aff;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.tips-text {
		font-size: 24rpx;
		color: #666;
		line-height: 1.6;
		margin-bottom: 10rpx;
		display: block;
	}
</style>
